import React, { FC } from 'react';
import theme from '../../../theme';

interface PinnedIconProps {
  width?: string;
  color?: string;
}

const PinnedIcon: FC<PinnedIconProps> = ({ width, color }) => {
  const DEFAULT_WIDTH = '12';
  const DEFAULT_COLOR = theme.colors.general.textSecondary;
  return (
    <svg
      stroke="currentColor"
      fill={theme.colors.general[color] || DEFAULT_COLOR}
      strokeWidth="0"
      viewBox="0 0 16 16"
      width={width || DEFAULT_WIDTH}
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M4 2h7v.278c0 .406-.086.778-.258 1.117-.172.339-.42.63-.742.875v2.86c.307.145.583.328.828.546.245.219.456.464.633.735.177.27.31.565.398.882.089.318.136.646.141.985v.5H8V14l-.5 1-.5-1v-3.222H3v-.5c0-.339.047-.664.14-.977.094-.312.227-.607.4-.883A3.404 3.404 0 0 1 5 7.13V4.27a2.561 2.561 0 0 1-.734-.875A2.505 2.505 0 0 1 4 2.278V2zm1.086.778c.042.125.094.232.156.32a1.494 1.494 0 0 0 .461.43L6 3.715v4.102l-.336.117c-.411.146-.76.383-1.047.711C4.331 8.973 4.09 9.573 4 10h7c-.088-.427-.33-1.027-.617-1.355a2.456 2.456 0 0 0-1.047-.71L9 7.816V3.715l.297-.18c.094-.057.177-.122.25-.195a2.28 2.28 0 0 0 .21-.242.968.968 0 0 0 .157-.32H5.086z"></path>
    </svg>
  );
};

export default PinnedIcon;
